<!doctype html>
<html lang="en">
	<head>
		<title>UIST 2012</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=1024" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="description" content="Forcepad Demo" />
		<meta name="author" content="Saiph Savage, Salvador Medina, Carlos Toxtli" />
		
		<script type="text/javascript">
			var serverBinary = "";
			var serverForce = "";
		</script>
		
		<script type="text/javascript" src="./resources/js/jquery-1.8.1.min.js"></script>
		<script type="text/javascript" src="./resources/js/jquery.mobile-1.2.0-rc.2.min.js"></script> 
		<script type="text/javascript" src="./resources/js/jquery-ui-1.8.23.custom.min.js"></script> 
		<script type="text/javascript" src="./resources/js/webkitdragdrop.js"></script>
		<script type="text/javascript" src="./resources/js/binary.js"></script>
		<script type="text/javascript" src="./resources/js/clientBinary.js"></script>
		<script type="text/javascript" src="./resources/js/main.js"></script>
		<script type="text/javascript" src="./resources/js/draw.js"></script>
		<script type="text/javascript" src="./resources/js/clientSocket.js"></script>
		
		<link rel="stylesheet" type="text/css" href="./resources/css/main.css">
		<link rel="stylesheet" type="text/css" href="./resources/css/style.css" />
		<link rel="stylesheet" type="text/css" href="./resources/css/impress-demo.css"  />
		<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" />
		<link rel="shortcut icon" href="./resources/images/favicon.png" />
		<link rel="apple-touch-icon" href="./resources/images/apple-touch-icon.png" />
	</head>
	<body class="impress-not-supported">
		<div class="fallback-message">
			<p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
			<p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
		</div>
		<div id="impress">
			<div class="step slideContainer" data-x="0" data-y="0" data-z="0" data-rotate="0" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1">
				<div id="container">
					<div id="slideshow">
						<figure tabindex="1" id="fig1">
						<figure tabindex="2" id="fig2">
						<figure tabindex="3" id="fig3">
						<figure tabindex="4" id="fig4">
						<figure tabindex="5" id="fig5">
						<figure tabindex="6" id="fig6">
						<figcaption></figcaption>
							<figure id="box">
								<div id="face1" class="faceStyle faceStyle2"><iframe id="frameFace1" src="./table.html" width=900 height=400></iframe></div>
								<div id="face2" class="faceStyle faceStyle2"><img src="./resources/images/faceh.png"></div>
								<div id="face3" class="faceStyle faceStyle3"><img src="./resources/images/faceh.png"></div>
								<div id="face4" class="faceStyle faceStyle4"><img src="./resources/images/faceh.png"></div>
								<div id="face5" class="faceStyle faceStyle5"><img src="./resources/images/facev.png"></div>
								<div id="face6" class="faceStyle faceStyle6"><img src="./resources/images/facev.png"></div>
							</figure>
						</figure>
						</figure>
						</figure>
						</figure>
						</figure>
						</figure>
					</div> <!-- End Slideshow -->
				</div> <!-- End Container -->
			</div>
			<div class="step slideSide" data-x="-600" data-y="0" data-z="0" data-rotate="0" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1">
				<q>Left Box</q>
			</div>
			<div class="step slideSide" data-x="600" data-y="0" data-z="0" data-rotate="0" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1">
				<q>Right Box</q>
			</div>
			<div class="step slideTop" data-x="0" data-y="-300" data-z="0" data-rotate="0" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1">
				<q>Top Box</q>
			</div>
			<div class="step slideTop" data-x="0" data-y="300" data-z="0" data-rotate="0" data-rotate-x="0" data-rotate-y="0" data-rotate-z="0" data-scale="1">
				<q>Bottom Box</q>
			</div>
			<div id="overview" class="step" data-x="0" data-y="0" data-scale="2">
			</div>
		</div>
		<div class="hint">
			<p></p>
		</div>
		<script>
			if ("ontouchstart" in document.documentElement) { 
				document.querySelector(".hint").innerHTML = "<p>Tap on the left or right to navigate</p>";
			}
		</script>
		<script src="./resources/js/impress.js"></script>
		<script>
			impress().init();
		</script>
	</body>
</html>
